<!--本文件由FirstUI授权予关赛川（手机号： 1 5  60  05 1  520 5，身份证尾号：22 6  5 1 9）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="guestInfoAdd marin25">
		<fui-list class='guest-alllist'>
			<fui-list-cell class="guest-list">
				<view> <text class="red-x">*</text><text>姓名</text></view>
				<input type="text" class="guest-input" v-model='form.name' placeholder="请输入入住人姓名" />
			</fui-list-cell>
			<fui-list-cell class="guest-list" @click='goIdCard'>
				<view class="guest-name"> <text class="red-x">*</text><text>证件类型</text></view>
				<view class="guest-input input1">
					<input type="text" class="" v-model="typeName" disabled placeholder="请选择证件类型" />
					<image class="input1-img" :src="baseOssUrl + 'icon/rightJt.png'" mode=""></image>
				</view>
			</fui-list-cell>
			<fui-list-cell class="guest-list">
				<view  class="guest-name"> <text class="red-x">*</text><text>证件号码</text></view>
				<input type="text" class="guest-input" v-model='form.idCard' placeholder="请填写正确的证件信息" />
			</fui-list-cell>
			<fui-list-cell class="guest-list">
				<view  class="guest-name"> <text class="red-x">*</text><text>手机号</text></view>
				<input type="text" class="guest-input" v-model='form.iphone' placeholder="请输入手机号" />
			</fui-list-cell>
		</fui-list>
		<view class="guiding marin25">
			根据国家相关法律法规，入住经营性质的酒店，民宿，必须提供入住者的身份信息。您的身份信息微湖会严格保密，仅用于必要的身份核实。
		</view>
		<view class="fixedBtn">
			<fui-button text="保存" background="#35743D" radius='50rpx' class="addButn" width="95%" @click='goSave' height="72rpx"
			 size='28'></fui-button>
		</view>
		<!-- <pickerChange ref='timeShow' :optionsArr='timeOptions' @houeseTextS='timeChange'></pickerChange> -->
		<fui-select :show="sfzTypeShow" :options="timeOptions" title="请选择证件类型" @confirm="timeChange" @close="onClose"></fui-select>
		<fui-toast ref="toast">
			<view class="fui-toast__custom">
				<fui-icon name="checkbox" color="#fff"></fui-icon>
				<text class="fui-toast__txt">保存成功</text>
			</view>
		</fui-toast>
		<fui-message ref="msg" :background="background"></fui-message>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import pickerChange from '@/components/component/pickerChange.vue'
	import {
		baseOssUrl
	} from '@/common/settings';
	export default {
		computed: mapState(['userId']),
		components: {
			pickerChange,
		},
		data() {
			return {
				baseOssUrl: baseOssUrl,
				checkval: '',
				form: {
					name: '',
					idType: '',
					idCard: '',
					iphone: '',
					id: ''
				},
				timeOptions: [{
					text: '身份证',
					value: 1
				}, {
					text: '护照',
					value: 2
				}, {
					text: '军官证',
					value: 3
				}],
				background: 'rgba(211,211,211,0.4)',
				sfzTypeShow: false,
				typeName: ''
			}
		},
		onLoad(op) {
			console.log('op新增', op)
			// this.userId = op.userId
			let formData = JSON.parse(op.data)
			console.log('formData', formData)
			this.form.name = formData.name
			this.form.id = formData.id
			this.form.idCard = formData.number
			this.form.iphone = formData.phone
			this.form.idType = formData.type
			console.log('idType', this.form.idType, )
			this.timeOptions.forEach(val => {
				console.log('opval', val)
				if (formData.type == val.value) {
					this.typeName = val.text
				}
			})
		},
		onShow() {},
		methods: {
			showMsg(val) {
				let options = {}
				options.text = val
				this.$refs.msg.show(options)
			},
			goSave() {
				if (this.form.name == '') {
					this.showMsg('请输入姓名')
					return false
				} else if (this.form.idType == '') {
					this.showMsg('请选择证件类型')
					return false
				} else if (this.form.idCard == '') {
					this.showMsg('请输入证件号码')
					return false
				} else if (this.form.iphone == '') {
					this.showMsg('请输入手机号')
					return false
				}
				if (this.form.id) {
					this.updataSave()
				} else {
					this.addSave()
				}
			},
			// 新增保存
			addSave() {
				this.$http.post(this.$httpApi.occupantSave, {
					data: {
						userId: this.userId,
						name: this.form.name,
						number: this.form.idCard,
						phone: this.form.iphone,
						type: this.form.idType
					}
				}).then(res => {
					if (res.code == 0) {
						console.log("1res", res)
						this.$refs.toast.show({})
						let timer = setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});

						}, 1000)
					}
				})
			},

			// 修改保存
			updataSave() {
				this.$http.post(this.$httpApi.occupantUpdata, {
					data: {
						id: this.form.id,
						name: this.form.name,
						number: this.form.idCard,
						phone: this.form.iphone,
						type: this.form.idType
					}
				}).then(res => {
					if (res.code == 0) {
						console.log("1res", res)
						this.$refs.toast.show({})
						let timer = setTimeout(() => {
							//需要定时执行的代码
							// uni.navigateTo({
							// 	url: "/pages/guestInformation/index"
							// })
							// uni.reLaunch({
							// 	url: "/pages/guestInformation/index"
							// })
							uni.navigateBack({
								delta: 1
							});
							// uni.redirectTo({
							// 	url: "/pages/guestInformation/index"
							// })
						}, 1000)
					}
				})
			},

			goIdCard() {
				// this.$refs.timeShow.goHouse()
				this.sfzTypeShow = true
			},

			timeChange(e) {
				console.log("改变", e)
				this.form.idType = e.options.value
				this.typeName = e.options.text

				this.sfzTypeShow = false
			},
			onClose() {
				this.sfzTypeShow = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.guestInfoAdd {
		height: 100%;
		margin-top: 25rpx;

		/deep/.fui-list__wrap {
			border-radius: 16rpx !important;
			overflow: hidden !important;
		}

		.guest-list {
			.red-x {
				color: red;
				margin-right: 8rpx;
			}
			.guest-name{
				width: 30%;
			}

			text {
				width: 360rpx;
				color: #1D1D1D;
				font-size: 30rpx;
			}

			display: flex;
			justify-content: space-between;

			.guest-input {
				color: #A7A7A7;
				font-size: 28rpx;
			}

			.input1 {
				display: flex;
				align-items: center;
				position: relative;

				.input1-img {
					width: 16rpx;
					height: 26rpx;
					position: absolute;
					right: 10rpx;

				}

			}
		}

		.guiding {
			color: #ADADAD;
			font-size: 24rpx;
			margin-top: 24rpx;
			line-height: 40rpx;
		}

		// 保存入住人信息
		.fixedBtn {
			position: fixed;
			bottom: 90rpx;
			width: 100%;

			.addButn {
				display: flex;
				justify-content: center;

			}
		}
	}

	.fui-toast__custom {
		display: flex;
		align-items: center;

		.fui-toast__txt {
			margin-left: 5rpx;
			color: #FFFFFF;
		}
	}

	// 必填弹窗文字颜色
	/deep/.fui-message__text {
		color: #919191 !important;
	}
</style>
